<!--
 * @Author: hucc
 * @Date: 2021-10-09 16:44:56
 * @LastEditors: hucc
 * @LastEditTime: 2021-10-10 17:06:58
 * @Description: 
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        用户名：<input type="text" v-model.lazy="username">
        <br> 密码： <input type="password" v-model.lazy="obj.password">
        <button @click="obj={}">按钮</button>
    </div>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                username: null,
                obj: {
                    password: null
                }
            },
            watch: {
                //浅监听
                //普通监听器只能监听普通基本数据类型的改变和引用数据类型地址值的改变
                //监听不到引用数据类型内部值的改变
                // username(newValue, oldValue) {
                //     console.log(newValue, oldValue);
                // },
                // obj(newValue, oldValue) {
                //     console.log(newValue.password, oldValue.password); //直接输出没有结果，加一个Button按钮obj={} 结果为undefined 输入的值
                // }

                //深度监听
                //监听对象本身的改变
                // obj: {
                //     handler(newValue, oldValue) {
                //         //console.log(newValue.password, oldValue.password);//newValue输出得值一样，都是newValue
                //     },
                //     //深度监听 监听内部值得改变
                //     deep: true
                // },

                //监听当前对象内部属性的改变 比较精准
                "obj.password": {
                    handler(newValue, oldValue) {
                        console.log(newValue, oldValue);
                    },
                    //深度监听 监听内部值得改变
                    deep: true
                }
            },
            methods: {},
            created() {}
        })
    </script>
</body>

</html>